CSS modules
CSS modulesを使うと、自動的に作成されたユニークなクラス名でスコープできる
フォーマットは[filename]\_[classname]\_\_[hash]
CSS modulesは同じCSS nameを異なるfileでつかっても衝突する心配がなくなる
2019 ABEMAは脱CSS Module
ディレクトリ構成を変更スタイル崩れた
import順序変更がモジュールの探索順序を変えて生成されるCSSのルールセットの定義順が変わった
https://gyazo.com/af77ab2b08f80dafcff5bdb3a936a46e
上位コンポーネントで下位コンポーネントを上書きしていたところが影響
目標
CSS Moduleベースの設計と似てて
リファクタに強く
ライブラリ独自機能の依存がない
利点
生成後のCSSを想像しやすくなった
欠点
クラス名の規約をつくった
規約を覚えた
レビューで規約チェック
CSS in JSはさけた
標準CSSを保つ
標準仕様から外れるPostCSSプラグインも使わない
ビルドを複雑にしない
CSS Modules を消し去りました．これにより css-loader や postcss-loader などが消え去り webpack のビルド設定がだいぶすっきりしました ✨